<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-input placeholder="请输入病害名称" clearable v-model="diseaseName" size="small" style="width: 150px" class="mRight10"> </el-input>
          <el-button class="btn" type="primary" size="small" @click="queryForPage(1)">查询</el-button>
        </div>
        <div>
          <!-- <el-button icon="el-icon-right" size="small" type="success" @click="handleDownLoad">
            导出养护单
          </el-button> -->
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table
          :data="tableData"
          stripe
          :header-cell-style="{
            background: '#8595B9',
            color: '#fff',
            height: '44px',
          }"
          max-height="660px"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column prop="taskName" label="养护单" show-overflow-tooltip></el-table-column>
          <el-table-column prop="diseaseName" label="病害名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="bridgeName" label="桥梁名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="diseaseLocationStr" label="病害位置" show-overflow-tooltip></el-table-column>
          <el-table-column prop="defectRecord" label="缺损记录" show-overflow-tooltip></el-table-column>
          <el-table-column prop="feedbackDescribe" label="养护描述" show-overflow-tooltip></el-table-column>
          <el-table-column property="state" label="处理状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <label :class="['insp-table-label', statusClass(scope.row.status)]">{{ statusText(scope.row.status) }}</label>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-tooltip content="详情">
                <el-button type="text" icon="el-icon-document" @click="handelDetail(scope.row.id)"> </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="currentPage"
          :hide-on-single-page="false"
          @current-change="handlePageChange"
          :page-size="pageSize"
          :total="recordsTotal"
        >
        </el-pagination>
      </div>
    </div>

    <!--养护记录详情-->
    <vx-popup :title="detailTitle" width="880px" @close="cancelDetail" :active.sync="detailVisible" @confirmPopup="cancelDetail" @cancelPopup="cancelDetail">
      <div class="insp-popup-detail">
        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>养护单 : </label>
            <span>{{ detailInfo['taskName'] || '' }}</span>
          </el-col>
          <el-col :span="12">
            <label>养护类型 : </label>
            <span>{{ detailInfo['taskTypeStr'] || '' }}</span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>桥梁名称 : </label>
            <span>{{ detailInfo['bridgeName'] || '' }}</span>
          </el-col>
          <el-col :span="12">
            <label>病害名称 : </label>
            <span>{{ detailInfo['diseaseName'] || '' }}</span>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>病害位置 : </label>
            <span>{{ detailInfo['diseaseLocation'] || '' }}</span>
          </el-col>
          <el-col :span="12">
            <label>缺损记录 : </label>
            <span>{{ detailInfo['defectRecord'] || '' }}</span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>养护人员: </label>
            <span>{{ detailInfo['feedbackName'] || '' }}</span>
          </el-col>
          <el-col :span="12">
            <label>养护时间: </label>
            <span>{{ detailInfo['feedbackTime'] || '' }}</span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>巡检人员: </label>
            <span>{{ detailInfo['inspectionName'] || '' }}</span>
          </el-col>
          <el-col :span="12">
            <label>养护级别: </label>
            <span>{{ detailInfo['level'] ? (detailInfo['level'] === 2 ? '三级' : '二级') : '一级' }}</span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>处理记录: </label>
            <span>{{ detailInfo['status'] ? statusText(detailInfo['status']) : '初报未处理' }}</span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="24">
            <label>养护图片 : </label>
            <span class="imageList">
              <el-image
                style="width: 70px; height: 70px; margin-right: 5px"
                v-for="(item, index) in computedImageList"
                :key="`${index}image`"
                :src="item"
                :preview-src-list="computedImageList"
              ></el-image>
            </span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="24">
            <label>养护反馈 : </label>
            <span class="over" :title="detailInfo['feedbackDescribe'] || ''">{{ detailInfo['feedbackDescribe'] || '' }}</span>
          </el-col>
        </el-row>
      </div>
    </vx-popup>
  </div>
</template>
<script>
import axios from '@/http/axios'
import base from '@/api/base'
export default {
  data() {
    return {
      detailTitle: '养护记录详情',
      detailVisible: false,
      diseaseName: '',
      pageSize: 14,
      currentPage: 1,
      recordsTotal: 0,
      tableData: [],
      multipleSelection: [],
      detailInfo: {},
    }
  },
  created() {
    this.queryForPage()
  },
  methods: {
    queryForPage(pageIndex) {
      if (pageIndex && pageIndex === 1) {
        this.currentPage = 1
      }
      const _params = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        diseaseName: this.diseaseName,
      }
      this.$api.curing.queryRecordsPage(_params).then((response) => {
        if (response.data.success) {
          if (response.data.data && response.data.data.length > 0) {
            this.tableData = response.data.data.map((item, index) => ({
              id: item.id,
              taskName: item.diseaseVO ? item.diseaseVO['taskName'] : '',
              diseaseName: item.diseaseName,
              bridgeName: item.diseaseVO ? item.diseaseVO['bridgeName'] : '',
              diseaseLocationStr: item.diseaseVO ? item.diseaseVO['diseaseLocationStr'] : '',
              defectRecord: item.defectRecord,
              feedbackDescribe: item.feedbackDescribe,
              state: item.diseaseVO ? item.diseaseVO['state'] : null,
            }))
          } else {
            this.tableData = []
          }
          this.recordsTotal = response.data.recordsTotal
        }
      })
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage
      this.queryForPage()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleDownLoad() {
      let ids = this.multipleSelection.map((item) => item.id)
      if (ids.length > 0) {
        let _ids = ids.join(',')
        let a = document.createElement('a')
        a.href = `${base.curingUrl}/maintenance/bridge/download?id=${_ids}`
        document.body.appendChild(a)
        a.click()
        URL.revokeObjectURL(a.href)
        document.body.removeChild(a)
      } else {
        this.$vs.notify({
          text: '请选择养护单！',
          color: 'primary',
        })
      }
    },
    queryRecordById(id) {
      this.$api.curing
        .queryRecordById({
          id,
        })
        .then((response) => {
          if (response.data.success) {
            if (response.data.data) {
              this.detailInfo = response.data.data
              console.log(this.detailInfo)
            }
          }
        })
    },
    handelDetail(val) {
      this.detailVisible = true
      this.queryRecordById(val)
    },
    cancelDetail() {
      this.detailVisible = false
    },
    statusClass(type) {
      switch (type) {
        case 0:
          return 'planStatus1'
        case 1:
          return 'planStatus1'
        case 2:
          return 'planStatus1'
        case 3:
          return 'planStatus1'
        case 4:
          return 'planStatus1'
        case 5:
          return 'planStatus1'
        case 6:
          return 'planStatus1'
        case 7:
          return 'planStatus1'
        case 8:
          return 'planStatus1'
        case 9:
          return 'planStatus1'
        case 10:
          return 'planStatus1'
        case 11:
          return 'planStatus1'
        case 12:
          return 'planStatus1'
        case 13:
          return 'planStatus1'
        case 14:
          return 'planStatus1'
        case 15:
          return 'planStatus1'
        case 98:
          return 'planStatus1'
        case 99:
          return 'planStatus99'
        default:
          return ''
      }
    },
    statusText(type) {
      switch (type) {
        case 0:
          return '创建设施损坏情况单'
        case 1:
          return '设施管理科安排任务中'
        case 2:
          return '设施待确认(巡视大队)'
        case 3:
          return '设施确认中(巡视大队)'
        case 4:
          return '设施待确认(设施科)'
        case 5:
          return '设施确认中(设施员)'
        case 6:
          return '设施确认完成(待派维修单)'
        case 7:
          return '维修单派单中'
        case 8:
          return '施工部门待接单'
        case 9:
          return '施工部门已接单'
        case 10:
          return '施工维修中'
        case 11:
          return '施工完成'
        case 12:
          return '维修结果待核查'
        case 13:
          return '维修结果核查中'
        case 14:
          return '维修结果待确认'
        case 15:
          return '维修结果确认中'
        case 98:
          return '待发'
        case 99:
          return '处理完成'
        default:
          return ''
      }
    },
  },
  computed: {
    computedImageList() {
      let _list = this.detailInfo['fileVOList'] ? this.detailInfo['fileVOList'] : []
      return _list.map((item) => `${base.DOWNLOADURL}${item.filePath}`)
    },
  },
}
</script>
<style scoped lang="scss">
@import '@/views/inspection/insp.scss';

/deep/.el-table__header tr,
/deep/.el-table__header th {
  padding: 0;
  height: 44px;
}

/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
  font-size: 14px;
}

/deep/.el-table th {
  font-weight: 500;
  color: #fff;
}

/deep/.el-table td {
  font-weight: 400;
  color: #444;
  padding: 0;
  height: 44px;
  line-height: 44px;
}

/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f1f5fc;
}

.btn {
  margin-left: 20px;
}
</style>
